import React, { useState } from 'react';
import { useNavigate, Outlet } from 'react-router-dom';
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import { Layout, Menu } from 'antd';



const { Header, Sider, Content } = Layout;
const Index = () => {

    function getItem(label, key, icon, children, type) {
        return {
            key,
            icon,
            children,
            label,
            type,
        };
    }
    var navigate = useNavigate()
    const items = [
        getItem('概况', 'sub1', <MailOutlined />, [
            getItem('实时概况', '/index/home/nowdate'),
        ]),
        getItem('会员管理', 'sub2', <AppstoreOutlined />, [
            getItem('会员查询', '/index/vipmanage/vipsearch'),
            getItem('会员等级', '/index/vipmanage/vipgrade'),
            getItem('付费会员卡', '/index/vipmanage/vipcard',),
            getItem('会员分析', '/index/vipmanage/vipthink',),

        ]),
        getItem('权益管理', 'sub3', <SettingOutlined />, [
            getItem('会员权益', '/index/equities/vipequities'),
            getItem('积分规则', '/index/equities/scorerole'),
            getItem('会员分析', '/index/equities/growrole'),

        ]),
        getItem('订单管理', 'sub4', <SettingOutlined />, [
            getItem('订单查询', '/index/order/ordersearch'),
            getItem('交易分析', '/index/order/dealthink'),

        ]),
        getItem('营销', 'sub5', <SettingOutlined />, [
            getItem('优惠卷', '/index/sale/cheapcard'),
            getItem('限时折扣', '/index/sale/time'),
            getItem('优惠数据', '/index/sale/fullcard'),
            getItem('流量分析', '/index/sale/flowthink'),
        ]),
        getItem('设置', 'sub6', <SettingOutlined />, [
            getItem('店铺信息', '/index/set/shopmassage'),
            getItem('个人信息', '/index/set/personmassage'),

        ]),
    ];

    const onClick = (e) => {
        console.log('click ', e);
        navigate(e.key);
    };
    const [theme, setTheme] = useState('light');
    const [current, setCurrent] = useState('1');
    return (
        <div className='index'>
            <Layout theme={theme}>
                <Header
                    style={{
                        position: 'sticky',
                        top: 0,
                        zIndex: 1,
                        width: '100%',
                        background: '#fff',
                    }}
                >
                    Header
                </Header>
                <Layout >
                    <Sider theme={theme}>
                        <Menu
                            theme={theme}
                            onClick={onClick}
                            mode="inline"
                            items={items}
                        />
                    </Sider>
                    <Content >
                        <Outlet />
                    </Content>
                </Layout>
            </Layout>
        </div >
    );
}

export default Index;
